<template>
	<view class="all">
		
	
	<view class="custom-navbar">
		 <view class="back-icon" @click="goBack">
		   <img src="../../static/民族风-返回.png" alt="" class="icon" />
		  </view>
	  <text class="custom-title">技能培训广场</text>
	 
	</view>
	<view class="search-box-father">
		<button class="search-box">
			<img src="../../static/搜索.png" class="search-icon" />
			<text>点击搜索培训</text>
			</button>
	</view>
	</view>
	
	
	
	
	 
	
	
	<custom-tab-bar />
</template>
<script>


export default {
  data() {
    return {
      records: null // 初始化 records 数据
    };
  },
   mounted() {
      this.downloadAndOpenPDF();
    },
  onLoad(options) {
    // 从查询参数中获取 records 字符串
    const recordsString = options.records;
    
    // 将 records 字符串转换回对象
    this.records = JSON.parse(decodeURIComponent(recordsString));
	console.log(this.records)
	 const firstRecord = this.records[0];
	  console.log(firstRecord. fileUrl); // 打印第一个元素
    downloadAndOpenPDF() ;
    // 现在你可以使用 this.records 在页面上展示数据
  },
   methods: {
  downloadAndOpenPDF() {
	  console.log(11111111111111111111111111111111111111111111111111111111111);
	   const firstRecord = this.records[0];
      uni.downloadFile({
        url: firstRecord. fileUrl, 
        success: (res) => {
          if (res.statusCode === 200) {
            let filePath = res.tempFilePath;
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: (data) => {
                console.log('打开文档成功');
              },
              fail: (error) => {
                console.error('打开文档失败', error);
              }
            });
          } else {
            console.error('下载文件失败', res.statusCode);
          }
        },
        fail: (error) => {
          console.error('下载文件失败', error);
        }
      });
    }
	}
	
  
};
</script>

<script setup>
	import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue'; 
	
	
	function goBack(){
		 wx.navigateBack({
		      delta: 1 // 返回上一页面
		    })
	};
	
</script>
<style lang="scss" scoped>
	.all{
		background-color: gainsboro;
	}
	.custom-navbar {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 80px; /* 导航栏高度 */
	  background-color: #00BFFF;
	  display: flex;
	  
	  justify-content: center;
	  color: white;
	  z-index: 999;
	  
	}
	.icon{
		position: absolute;
		  height: 37px;
		  width: 50px;
		  margin-top: 47px;
		  margin-left: 10px;
		 
	  }
	.custom-title {
	  font-size: 20px; /* 设置你想要的大小 */
	  margin-top: 51px;
	  font-weight: bold;
	  margin-left: auto; /* 使标题向右对齐 */
	    margin-right: auto; /* 使标题向左对齐，与 margin-left: auto 配合实现居中 */
	}
	.search-box-father{
		margin-top: 55px;
		margin-bottom: 0px;
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		height: 35px;
		display: flex;
		align-items: center;
		border-radius: 0 0 10px 10px;
	}
	.search-box{
		font-size: 14px;
		height: 20px;
		width: 95%;
		background-color:lightgray;
		color: dimgray;
		line-height: 19px;
		display: flex;
		border-radius: 10px;
		
		
	}
	.search-icon{
		height: 20px;
		width: 20px;
	}
	
	
</style>
